<script setup lang="ts">
import { ref, toRaw, watch, computed, onMounted } from "vue";
import { titles, setType, iptDown, keyType } from "./tablef";
import JSrot from "@/components/j-sort/index.vue";
import { useKline } from "@/stores/kline";
import { Bus, CHART_CHAIN_SUBSCRIBE, CHART_KLINE_SUBSCRIBE } from "@/connetion/Bus";
import { sortByKey } from "@/comm/helper";
import { formatBigNumber } from "@/comm/format";
import JNumber from "@/components/j-number/index.vue";
import JInput from "@/components/j-input/index.vue";
import JLabel from "@/components/j-label/index.vue";
import { useCore } from "@/hooks/useCore";
import { collect, isItem, keyType as kType, ResType } from "@/comm/BookMark";
import { tablecoin } from "./script/TableCoin";
import BookMarkImg from "@/components/j-svg/bookmarkImg.vue";
const curKey = ref("");
const curDir = ref(0);
// const searchKey = ref("");
// const items = ref<any[]>([]);
const sug = ref("");

const core = useCore();
const kline = useKline();
const list = computed(() => {
    if (kline.map) {
        let ary = kline.map;
        if (curKey.value) {
            let list = [...kline.map];
            sortByKey(list, curKey.value, curDir.value == 1);
            ary = list;
        }
        if (sug.value) {
            ary = ary.filter(i => i.symbol.toLowerCase().includes(sug.value.toLowerCase()));
        }
        ary.forEach(item => (item._icon = isItem(kType.CoinPairs, item.id)));
        return ary;
    }
    return [];
});
function refreshIcon() {
    list.value.forEach(item => {
        item._icon = isItem(kType.CoinPairs, item.id);
    });
}

const itemKeys = computed(() => {
    let list = kline.map || [];
    return list.map(i => {
        return {
            title: i.symbol,
            value: i
        };
    });
});

const prop = defineProps({
    closeIpt: {
        type: Function,
        default: function () { }
    }
});
async function toggle(item: string) {
    const t: any = kline.map.find(item_ => item_.symbol === item);
    setTimeout(() => {
        prop.closeIpt();
    }, 500);

    await core.switchCoin(t);
}

const onChooseCoin = async (item: any) => {
    tablecoin.addItem(toRaw(item));
    // kline.changeCurCoin(item);
    console.log("##jsz 切换", item);
    setTimeout(() => {
        prop.closeIpt();
    }, 500);

    await core.switchCoin(item);
};

const onChoose = (item: any) => {
    setType(item);
    console.log(item);
    if (item.value == 0) {
        curKey.value = "";
    } else {
        curKey.value = item.key;
        curDir.value = item.value;
    }
};

onMounted(() => {
    tablecoin.init();
});
</script>
<template>
    <div class="table c-title-5 d-flex flex-column">
        <!-- 输入框  -->
        <div class="j-box">
            <JInput v-model="sug"></JInput>
        </div>
        <!-- 历史记录 -->
        <div class="j-history" v-if="tablecoin.show.value">
            <!-- <span class="c-title-5 c-clor">搜索历史</span> -->
            <span class="c-title-5 c-clor">{{ $t("message.tablecoin.a") }}</span>
            <span class="mdi mdi-trash-can-outline c-clor" style="float: right;" @click.stop="tablecoin.clear"></span>
            <!-- <span class="c-clor" @click="tablecoin.clear" style="float: right;font-size: 10px;">{{ $t("message.tablecoin.b")}}</span> -->
            <div class="history_item">
                <span class="item" v-for="item in tablecoin.coin.value" @click.stop="toggle(item)">
                    <span>{{ item }}</span>
                </span>
            </div>
            <!-- <span class="c-clor" @click="tablecoin.clear" style="float: right;font-size: 10px;">清空</span> -->
        </div>
        <!-- 标题 -->
        <VRow no-gutters class="pt-1 pb-1 flex-0-1" style="color: var(--color)">
            <VCol class="d-flex align-center coss rgt" :cols="item.flex" v-for="(item, idx) in titles" @click.stop="onChoose(item)"
                :class="idx > 1 ? 'pl-12' : ''">
                <span class="text-no-wrap">{{ item.name }}</span>&nbsp;
                <JSrot :sort="{ val: Number(item.value), key: idx }" :call-fun="() => { }"></JSrot>
            </VCol>
        </VRow>
        <!-- 列表 -->
        <div class="flex-1-1 overflow-x-hidden">
            <VRow no-gutters v-for="item in list" class="pt-1 row-ci" @click.stop="onChooseCoin(item)">
                <VCol cols="4" class="col0 c-title-4 d-flex coss">
                    <div class="col-btn" :class="item._icon ? 'y-active' : ''"
                        @click.stop="collect(kType.CoinPairs, toRaw(item), refreshIcon)">
                        <BookMarkImg></BookMarkImg>
                    </div>

                    <JLabel :label="item.symbol"></JLabel>
                </VCol>
                <VCol cols="3" class="coss rgt"><span class="c-title-4">${{ item.lastPrice }}</span></VCol>
                <VCol cols="2" class="coss rgt">
                    <JNumber :num="item.priceChangePercent" :is-color="true" suffix="%"></JNumber>
                </VCol>
                <VCol cols="3" class="coss rgt"><span class="c-title-4">{{ formatBigNumber(item.quoteVolume) }}</span></VCol>
                <!-- <div class="few">永續</div> -->
            </VRow>
        </div>
    </div>
</template>
<style lang="less" scoped>
.svg{
    width: 12px;
    height: 12px;
}
.j-history {
    padding-inline: calc(var(--space) * 2);

    .history_item {
        width: 100%;
        // background-color: blue;
        margin-block: calc(var(--space) / 2);
        display: flex !important;
        flex-wrap: wrap;
        gap: calc(var(--space) * 0.5);

        .item {
            text-align: left !important;
            padding-inline: 4px;
            color: var(--color);
            background-color: rgb(43, 49, 57);
        }
    }
}

.col-btn {
    transform: scale(0.8);
    margin-right: 8px;

    :deep(#sc) {
        fill: #909090;
    }

    &:hover {
        :deep(#sc) {
            fill: var(--main);
        }
    }

    &.y-active {
        :deep(#sc) {
            fill: var(--main);
        }
    }

    // background-color: red;
}

:deep(.v-input__control) {
    width: 100%;
}

:deep(.v-field__input) {
    // border: red 1px solid;
    padding: 0px !important;
    padding-inline: 5px !important;
    margin-right: 15px !important;
    min-height: auto;
    height: 100%;
}

.tispList {
    padding: 10px;
    border-bottom: solid 1px rgba(255, 255, 255, 0.02);

    &:hover {
        background-color: rgba(0, 0, 0, 0.1);
        // background-color: var(--main);
    }

    font-size: 12px;

    .v-col:last-child {
        text-align: right;
    }

    .numb {
        display: inline-block;
        padding: 2px;
        background-color: rgb(47, 31, 4, 0.386);
        color: var(--main);
    }

    img {
        @wh: 30px;
        width: @wh;
        height: @wh;
    }
}

.table {
    width: 480px;
    height: 480px;
    border-radius: 4px;
    // background-color: var(--border_);
    // user-select: none;
    // position: fixed;
    // left: 20%;
    // z-index: 9;

    img {
        width: 16px;
        height: 16px;
    }

    .updown {
        i {
            text-align: center;
            width: 1px;
            height: 7px;
            // background-color: blue;
        }
    }

    .header {
        display: flex;
    }

    .v-col {
        padding-block: 0;
    }

    .v-col:nth-child(2) {
        // padding-left: 30px;
        text-align: right;
    }

    .v-col:nth-child(3) {
        text-align: right;
    }

    .v-col:nth-child(4) {
        text-align: right;
    }
}

.pt-1 {
    display: flex;
    align-items: center;
    // border-bottom: solid 1px #f0f0f0;
    padding-inline-start: 20px;
    padding-inline-end: 20px;
    padding-block: 5px;
    height: auto;

    &:hover {
        background: rgba(255, 255, 255, 0.1);
    }
}

.j-box {
    padding: 12px;

    :deep(.j-input-txt) {
        padding-inline-start: 36px;
        height: 32px;
    }

    :deep(.j-input) {
        position: relative;

        &::after {
            position: absolute;
            left: 8px;
            top: 0;
            height: 100%;
            width: 30px;
            z-index: 1;
            display: block;
            content: "";
            background: url("@/assets/sousuo-2.svg") no-repeat center;
            background-size: auto 40%;
        }
    }
}

.row-ci {
    // padding-bottom: 20px;
    position: relative;
    &:active {
        background: rgb(0, 0, 0, 0.02);
    }
}

.col0 {
    align-items: center;
    position: relative;

    i {
        position: absolute;
        left: -15px;
    }

    // background-color: red !important;
}

.coss {
    // border: solid 1px #ff0000;
    width: 0;
    overflow: hidden;
    &.rgt{
        justify-content: flex-end;
        &:first-child{
            justify-content: flex-start !important;
        }
    }
}

.few{
    position: absolute;
    left: 40px;
    bottom: 4px;
    color: #909090;
    font-size: 12px;
}
</style>
